/*__________________________________________ Basic styles
*/
.image {
	background-image: url('../img/sprite.png');
}
table, .f100 {
	width: 100%;
}
.f50 {
	width: 50%;
}
.f25 {
	width: 25%;
}
h1#logo {
	width: 148px;
	height: 32px;
	background-position: 0 0;
}
a#ans {
	width: 27px;
	height: 32px;
	background-position: -149px 0;
	float: right;
}


/*__________________________________________ Basic styles for HTML
*/
#html {
	background: $black-80;
}
body {
	padding: 20px 50px;
	max-width: 2000px;
	min-width: 400px;
	margin: 0 auto;
	font-family: $typography;
}
#html > header {
	margin-bottom: 20px;
}
#html > header nav {
	float: right;
	color: $black-20;
	font-size: 0.8em;
}
#html > header nav a {
	color: $white;
}
#html > header nav a:hover {
	text-decoration: none;
}
#html > section {
	background: $white;
	$box-shadow: 0 0 5px $black;
	margin-bottom: 20px;
	$background-linear-gradient: top $white $black-10;
	$border-radius: 8px;
}
#html > nav + section {
	$border-radius: 0 0 8px 8px;
}
#html > nav {
	background: $color;
	padding: 8px;
	margin-top: 0;
	margin-bottom: 0;
	color: $color-30;
	font-size: 0.9em;
	$border-radius: 8px 8px 0 0;
}

/* Sections: header */
body > section > header {
	padding: 30px;
}
body > section > header > hgroup {
	display: inline-block;
	margin-right: 20px;
	vertical-align: bottom;
}
body > section > header h1 {
	color: $black;
	text-shadow: 0 0 4px $black-40;
	display: inline;
	font-size: 1.8em;
}
body > section > header h2 {
	color: $black-20;
	display: inline;
	font-size: 1.4em;
	text-transform: uppercase;
}
body > section > header p {
	color: $black-40;
	font-size: 0.8em;
}
body > section > header > nav {
	display: inline-block;
	white-space: nowrap;
	vertical-align: bottom;
}
body > section > header > form {
	margin-top: 10px;
}
input[type="search"] {
	font-size: 1.2em;
	padding: 6px 10px;
	color: $black-40;
	width: 100%;
}

/* Sections: search */
#search p {
	font-size: 0.9em;
	margin-top: 5px;
	color: $black-60;
}
#search p a {
	color: $color;
}
#search p a:hover {
	text-decoration: none;
}


/* Sections: article */
body > section > article {
	padding: 0 30px 20px 30px;
	overflow-x: auto;
}



/*__________________________________________ Basic styles for IFRAME
*/
body#iframe {
	height: auto;
}
body#iframe > section {
	padding: 0;
}



/*__________________________________________ Pagination
*/
#pagination {
	padding-top: 20px;
}
#pagination li {
	margin-right: 2px;
}
#pagination li span,
#pagination li a {
	font-size: 0.8em;
	background: $white;
	border: solid 1px $black-20;
	padding: 3px 8px 2px;
	color: $black-40;
	$border-radius: 4px;
}
#pagination li a {
	background: $color;
	border: solid 1px $color;
	color: $white;
}
#pagination li a:hover {
	background: $black;
	border: solid 1px $black;
	color: $white;
}


/*__________________________________________ Basic styles for LOGIN
*/
body.login {
	max-width: 400px;
	margin-top: 100px;
}
body.login form {
	padding: 20px;
}
body.login form h1 {
	margin-bottom: 10px;
}
body.login form p {
	margin-top: 10px;
}
body.login label {
	font-size: 0.8em;
	width: 80px;
	float: left;
	color: $black-40;
}
body.login input[type="text"],
body.login input[type="password"] {
	width: 280px;
}
body.login input[type="submit"] {
	margin-left: 80px;
}



/*__________________________________________ jQuery UI
*/
.ui-widget {
	font-family: $typography;
	font-size: 9pt;
}
.ui-widget.ad {
	text-align: center;
	margin: 20px 0;
}
td .ui-widget.ad {
	margin: 0;
}
.ui-widget p {
	padding: 10px;
	text-align: left;
}
.ui-state-highlight.success {
	color: $success;
	background: $success-bg;
	border-color: $success;
}
.ui-state-highlight.success .ui-icon{
	background-image: url("jquery-ui/images/ui-icons_16a4cc_256x240.png");
}
strong.ui-icon {
	display: inline-block;
}
.inline-block {
	display: inline-block;
}


/*__________________________________________ Modal
*/
#modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: rgba(0,0,0,0.5);
}
#modal p {
	position: absolute;
	top: 25%;
	width: 100%;
	text-align: center;
	font-size: 2em;
	color: $white;
	font-weight: $bold;
	text-shadow: 0 0 6px $black;
}


/*__________________________________________ Message
*/
#message {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	background: $black-10;
	padding: 10px 0;
	text-align: center;
	font-weight: $bold;
	text-shadow: 1px 1px 0 $white;
	font-size: 1em;
	cursor: pointer;
	$box-shadow: 4px 0 4px $black;
}
#message.error {
	color: $error;
	background: $error-bg;
}
#message.success {
	color: $success;
	background: $success-bg;
}
